<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}

		/*类型切换*/
		.sel-type{position: fixed;width: 100%;height: 46px;background: #FFFFFF;z-index: 999;}
		.sel-type .type-one{height: 100%;text-align: center;line-height: 46px;font-size: 15px;color: #BDBDBD;}
		.sel-type .type-one.on{color: #FF9502;position: relative;}
		.sel-type .type-one.on:after{display: block;content:"";width: 24px;height: 3px;background: #FF9502;position: absolute;bottom: 0;left: 50%;margin-left: -12px;}
		.zhanwei{width: 100%;height: 46px;background: #F6F6F6;}

		.quan-list{width: 100%;padding: 10px 15px;box-sizing: border-box;}
		.quan-list .quan-one{width: 100%;margin-bottom: 10px;padding-bottom: 28%;background: url(../../../image/main3/quan_bg.png) no-repeat center ;background-size:contain;position: relative;top: 0;left: 0;}
		.quan-list .quan-one .l{width: 30%;position: absolute;top: 0;left: 0;height: 100%;color: #FFFFFF;align-items: center;justify-content: center;}
		.quan-list .quan-one .l .lable{font-size: 18px;margin:12px 0 0 -20px;font-weight: bold;}
		.quan-list .quan-one .l .price{font-size: 38px;margin-left: 4px;font-weight: bold;}
		.quan-list .quan-one .l .lable.min{margin:6px 0 0 -10px;}
		.quan-list .quan-one .l .price.min{font-size: 26px;margin-left: 4px;}
		.quan-list .quan-one .l .text{font-size: 24px;}
		.quan-list .quan-one .r{width: 70%;position: absolute;top: 0;right: 0;height: 100%;color: #930D34;padding: 10px 15px 10px 0;box-sizing: border-box;}
		.quan-list .quan-one .r .r-box{background: #ffffff;width: 100%;height: 100%;border-radius:0 4px 4px 0;flex-direction: column;justify-content: center;padding:0 10px 0 15px;box-sizing: border-box;}
		.quan-list .quan-one .r .r-box .title{font-size: 14px;font-weight: 700;color: #333333;width: 100%;}
		.quan-list .quan-one .r .r-box .type{font-size: 12px;padding-top: 4px;color: #9399A5;}
		.quan-list .quan-one .r .r-box .time{font-size: 12px;padding-top: 2px;color: #9399A5;}
		.quan-list .quan-one .sel-one{width: 18px;height: 18px;position: absolute;top: 11px;right: 16px;background:url(../../../image/main2/sel_icon0.png) no-repeat center;background-size:contain;}
		.quan-list .quan-one .quan-sta{width: 60px;height: 60px;position:absolute;top: 20px;right: 18px;display: none;}
		.quan-list .quan-one .quan-sta img{width: 100%;}

		.quan-list .quan-one.on .sel-one{background:url(../../../image/main2/sel_icon3.png) no-repeat center;background-size:contain;}
		.quan-list .quan-one.no .quan-sta{display: block;}
		.quan-list .quan-one.no {background: url(../../../image/main3/quan_bg3.png) no-repeat center ;}
		.quan-list .quan-one.no .r .r-box .title{color: #999999;width: 60%;}

	</style>
	<body>
		<div id="vue" class="warp">

			<!--类型切换-->
			<div class="sel-type flex">
				<div class="type-one flex1 on" tapmode onclick="tab_type(this);" data-sta="0">未使用</div>
				<div class="type-one flex1" tapmode onclick="tab_type(this);" data-sta="1">已使用</div>
				<div class="type-one flex1" tapmode onclick="tab_type(this);" data-sta="2">已失效</div>
			</div>
			<div class="zhanwei"></div>

			<div class="quan-list" style="display:none;" :style="{ display:(Pdata ? '':'none')}">
				<div :class="['quan-one flex', item.sta > 2 ? 'no':'']" v-for="(item,key) in Pdata.listData">
					<div class="l flex">
						<div :class="['lable',item.val >= 99 ? 'min':'']" v-if="item.type == 'money'">¥</div>
						<div :class="['price',item.val >= 99 ? 'min':'']" v-if="item.type == 'money'" v-text="item.val"></div>
					</div>
					<div class="r flex">
						<div class="r-box flex">
							<div class="title han_1" v-text="item.title"></div>
							<div class="type" v-text="item.str"></div>
							<div class="time"><i v-text="item.kaidate"></i> - <i v-text="item.enddate"></i></div>
						</div>
					</div>
					<div class="quan-sta">
						<img v-if="item.sta == 1 || item.sta == 2" src="../../../image/main3/quan_bg1.png"/>
						<img v-if="item.sta == 3" src="../../../image/main3/quan_bg2.png"/>
					</div>
				</div>
			</div>

			<!--占位图-->
			<div class="nodata" style="display:none;" :style="{ display:(noData ? '':'none')}">
				<img src="../../../image/no_page/no_youhui.png" />
				<p>暂无优惠券</p>
			</div>
			<!-- 底部 -->
			<div class="bottom-box" :style="{ display:(loadingMsg ? '':'none')}">
				<div class="msgbox" v-html="loadingMsg" style="color:#999;"></div>
			</div>

		</div>
	</body>
</html>
<script type="text/javascript" src="../../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">

	define(function (require, exports, module) {
		var sta = 0
		_page.getData = function(loading) {
			lanYun.getVueData({url:'UserQuan/quanlist',get:{page:lanYun.page,status:sta},cache:0,loading:loading},function(ret) {
				//console.log(JSON.stringify(ret));
			});
		};
		lanYun.newVue('#vue',function() {
			_page.getData(2);
		});

		//滚动加载..
		new auiScroll({distance:200, listen:true},function(ret) {
			if($(window).scrollTop() < 2) ret.isToBottom = false;
			var d = ret.scrollTop / 208;
			if(!ret.isToBottom) return;
			_page.getData(0);
		});

		//切换头部类型
		tab_type = function (tis) {
	        var dst = tis.dataset;
	        var index = $(tis).index();
	        $('.sel-type .type-one').removeClass('on');
        	$(tis).addClass('on');
			sta = dst.sta;
			lanYun.ajaxPageSta = 0; lanYun.page = 1;
			_page.getData(2);
	    }

	});

</script>
